<template>
	<view class="nav-header">
		<navigator class="i-back" open-type="navigateBack">
			<uv-icon color="#000" name="arrow-left" size="45rpx"></uv-icon>
		</navigator>
		<view style="display: flex;" @click="showTypeList()">
			全部订单
			<uv-icon color="#000" name="arrow-down-fill" size="25rpx"></uv-icon>
		</view>
		<view></view>
	</view>
	<view style="display: flex;background-color: #fff;padding: 20rpx 30rpx;">
		<uv-input prefixIcon="search" fontSize="20rpx" customStyle="width: 70%;height: 40rpx;"
			placeholder="输入关键词。目的地，商品名称或出行人姓名" clearable="true" shape="circle"></uv-input>
		<uv-button customStyle="height: 60rpx;" customTextStyle="color: #47c1fe;" color="#fff" text="搜索"></uv-button>
	</view>
	<view style="background-color: #fff;">
		<uv-tabs scrollable="false" lineColor="linear-gradient(to right, #4ac2fe, #eef9ff)#" :list="statusList"></uv-tabs>
	</view>
	<view class="order-list">
		<view class="order">
			<view class="order-head">
				<view style="display: flex;line-height: 28rpx;">
					<uv-icon size="35rpx" name="car-fill"></uv-icon>
					酒店
				</view>
				<view style="display: flex;line-height: 28rpx;">
					已完成
					<view style="margin: 0 5px;color: #949597;">|</view>
					<uv-icon size="35rpx" name="trash"></uv-icon>
				</view>
			</view>
			<view class="order-content">
				<uv-image height="5rem" width="5rem" radius="10px"></uv-image>
				<view style="margin-left: 10px;padding-top: 20rpx;">
					<view style="font-weight: 700;">候鸟湾公寓</view>
					<view style="font-weight: 300;">地址。房型</view>
				</view>
			</view>
			<view class="order-footer">
				<view>在线付￥110</view>
				<uv-button customStyle="height: 40rpx" shape="circle" type="primary" text="去支付"></uv-button>
			</view>
		</view>
	</view>

	<uv-popup mode="top" ref="popup" customStyle="height: 300rpx;">
		订单类型筛选
		<uv-grid :border="false" :col="3" @click="selectType">
			<uv-grid-item v-for="(item,index) in typeList" :key="index">
				<uv-button :text="item.name"></uv-button>
			</uv-grid-item>
		</uv-grid>
	</uv-popup>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				autoplay: true,
				duration: 500,
				indicatorDots: true,
				lazyLoad: true,
				statusList: [{
					name: '全部'
				}, {
					name: '待支付'
				}, {
					name: '待出行'
				}, {
					name: '退款/售后'
				}, {
					name: '带点评'
				}],
				typeList: [{
					name: '全部'
				}, {
					name: '酒店民宿'
				}, {
					name: '汽车·船票'
				}, {
					name: '门票'
				}, {
					name: '旅游出行团购'
				}, {
					name: '商城商品'
				}],
				value: 0,
				timeData: {}
			}
		},
		onLoad() {

		},
		methods: {
			gotoUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			showTypeList() {
				this.$refs.popup.open();
			},
			selectType(name) {
				uni.showToast({
					icon: 'none',
					title: `点击了第${name}个`
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f1f3f8;
	}

	.nav-header {
		height: 64rpx;
		width: 100%;
		background: #fff;
		font-size: 35rpx !important;
		text-align: center;
		line-height: 64rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-list {
		padding: 0 5%;
	}

	.order {
		background-color: #fff;
		margin-top: 10rpx;
		border-radius: 15px;
		padding-top: 20rpx;
	}

	.order-head {
		display: flex;
		padding: 10rpx 20rpx;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.order-content {
		padding: 10rpx;
		height: 5rem;
		display: flex;
	}

	.order-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		padding: 20rpx;
	}
</style>